<template>
    <div class="edit-pos-modal" ref="editAddModal">
        <a-modal v-model:open="state.isShow" width="700px" wrapClassName="custom-modal"
            :bodyStyle="{ height: '220px', overflowY: 'overlay', overflowX: 'hidden', paddingRight: '6px' }"
            :title="state.formState.id != undefined && state.formState.id > 0 ? '编辑职位' : '添加职位'" cancelText="取消"
            okText="确定" :getContainer="() => $refs.editAddModal" @ok="handleOk" @cancel="handleCancel">
            <a-form ref="formRef" :model="state.formState" name="pos-edit-form" autocomplete="off"
                :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-row>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item label="职位名称" name="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '职位名称不能为空', trigger: 'blur' }]">
                            <a-input v-model:value="state.formState.name" placeholder="职位名称" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item label="职位编码" name="code" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '职位编码不能为空', trigger: 'blur' }]">
                            <a-input v-model:value="state.formState.code" placeholder="职位编码" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item label="排序" name="orderNo">
                            <a-input-number v-model:value="state.formState.orderNo" placeholder="排序" class="w-full" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item label="状态" name="status">
                            <a-radio-group v-model:value="state.formState.status">
                                <a-radio :value="1">启用</a-radio>
                                <a-radio :value="2">禁用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item label="备注" name="remark" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                            <a-textarea v-model:value="state.formState.remark" placeholder="请输入备注内容" :rows="2"
                                allow-clear />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { showMsg } from '@/utils';
import type { ItemType } from '../types';
import { apiSysPosAddPost, apiSysPosUpdatePost } from '@/api/sys/sysPos';

const emits = defineEmits<{
    (e: "handleQuery"): void
}>()

const formRef = ref<FormInstance>()
const editAddModal = ref()

interface FormType {
    id: number | undefined
    name: string
    code: string
    orderNo?: number
    status?: number
    remark?: string
}
const state = reactive({
    isShow: false,
    formState: {

    } as FormType,
})

const handleOk = async () => {
    await formRef.value?.validate()
    
    if (state.formState.id != undefined && state.formState.id > 0) {
        await apiSysPosUpdatePost(state.formState)
    } else {
        await apiSysPosAddPost(state.formState)
    }

    showMsg("操作成功", 'success')
    handleCancel()
    emits('handleQuery')
}

const handleCancel = () => {
    state.isShow = false
    // @ts-ignore
    state.formState = {}
}

const handleOpen = (row: any) => {
    state.formState = JSON.parse(JSON.stringify(row))
    state.isShow = true
    formRef.value?.clearValidate()
}

defineExpose({
    handleOpen,
})
</script>

<style lang="scss" scoped></style>